<template>
    <div class="user-index">
        <el-card header="综合评分" class="mb-4">
            <div class="user-item">
                <div class="user-icon">
                    <el-icon size="30">
                        <StarFilled/>
                    </el-icon>
                </div>
                <div class="flex flex-col">
                    <div class="font-bold text-lg flex items-center pb-1">
                        <span class="pr-2">综合评分</span>

                        <el-tag v-if="info.goodStyle" type="success" size="small">审核成功</el-tag>
                        <el-tag v-else type="info" size="small">待提交</el-tag>

                    </div>
                    <div class="text-gray-400 opacity-90">根据创作者履历打分</div>
                </div>

                <router-link to="./auth">
                    <el-button class="w-[90px]" type="primary">查看</el-button>
                </router-link>
            </div>
        </el-card>

        <el-card header="作品打分" class="mb-4">
            <div class="user-item">
                <div class="user-icon">
                    <el-icon>
                        <Notebook/>
                    </el-icon>
                </div>
                <div class="flex flex-col">
                    <div class="font-bold text-lg flex items-center pb-1">
                        <span class="pr-2">作品评分</span>

                        <el-tag v-if="info.workName" type="success" size="small">审核成功</el-tag>
                        <el-tag v-else type="info" size="small">待提交</el-tag>
                    </div>
                    <div class="text-gray-400 opacity-90">作品评定打分</div>
                </div>

                <!--                <router-link to="./auth">-->
                <!--                    <el-button class="w-[90px]" type="primary">查看</el-button>-->
                <!--                </router-link>-->
                <el-button class="w-[90px] opacity-50" disabled type="info">查看</el-button>
            </div>
        </el-card>

        <el-card header="用户投票结果" class="mb-4">
            <div class="user-item">
                <div class="user-icon">
                    <el-icon>
                        <Tickets/>
                    </el-icon>
                </div>
                <div class="flex flex-col">
                    <div class="font-bold text-lg flex items-center pb-1">
                        <span class="pr-2">用户评分</span>
                        <el-tag type="info" size="small">待评分</el-tag>
                    </div>
                    <div class="text-gray-400 opacity-90">用户根据作品喜好度进行投票</div>
                </div>

                <!--                <router-link to="./auth">-->
                <el-button class="w-[90px] opacity-50" disabled type="info">查看</el-button>
                <!--                </router-link>-->
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import {useAuthStore} from "@/stores/modules/auth";
import {computed} from "vue";

const authStore = useAuthStore();
const info = computed(() => authStore.authInfo as any)
</script>

<style lang="scss" scoped>
.user-item {
    @apply rounded-lg flex items-center justify-start relative px-5;
    border: 1px solid #eee;
    height: 120px;

    .user-icon {
        @apply rounded-full bg-gray-200 flex items-center justify-center mr-4;
        width: 56px;
        height: 56px;

        .el-icon {
            @apply text-2xl text-gray-50;
        }
    }

    :deep(.el-tag) {
        border: none;
    }

    :deep(.el-button) {
        @apply absolute right-6 top-1/2;
        transform: translateY(-50%);
    }
}
</style>
